"use client";
import Link from "next/link";
import { IoClose } from "react-icons/io5";
import "react-responsive-carousel/lib/styles/carousel.min.css";
import { Carousel } from 'react-responsive-carousel';


interface ModalProps {
    image: string;
    title: string;
    description: string;
    technology: string;
    contributed:string;
    code_link:string;
    images_and_descriptions: { image: string, description: string }[];
    onClose: () => void;
}

const Modal: React.FC<ModalProps> = ({image, title, description, code_link, contributed, technology,images_and_descriptions    , onClose}) => {

    return (
        <>
            <dialog className="fixed left-0 top-0 w-full h-full bg-black bg-opacity-50 z-50 overflow-auto backdrop-blur flex justify-center items-center">
                     <div className="bg-white m-auto p-4 max-w-full md:max-w-6xl">
                        <div className="flex flex-col items-center relative">
                            <div className="carousel-slider max-w-2xl">
                                <Carousel>
                                    {
                                        images_and_descriptions.map((item: { image: string; description: string | number | boolean | React.ReactElement<any, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> }, index:number) => {
                                            return (
                                                <div key={index}>
                                                    <img src={item.image} className="object-contain"/>
                                                    <p className="legend">{item.description}</p>
                                                </div>
                                            )
                                        })
                                    }
                                </Carousel>
                            </div>
                            {/*<img src={image} alt={title} className="w-80 h-60" />*/}
                            <h1 className="text-2xl font-bold my-2">{title}</h1>
                            <div className="max-w-2xl mx-auto">{description}</div>
                            <div className="w-full text-left my-1">参与方式：{contributed}</div>
                            <div className="w-full text-left">代码仓库网址：{code_link}</div>
                            <button className="absolute -top-4 -right-4" onClick={onClose}>
                                <IoClose className="text-2xl cursor-pointer" />
                            </button>
                        </div>
                    </div>
                </dialog>
        </>
    );
}

export default Modal;